<template>
	<view class="pro-body">

		<view class="body">
			<view class="top-container no-bottom-padding">
				<uni-list :border="false">
					<uni-list-item :border="false" title="单据编号" :rightText="header.billNo" />
					<uni-list-item :border="false" title="称重申请单号" :rightText="header.weightNo" />
					<uni-list-item :border="false" title="供应商" :rightText="header.supplierName" />
					<uni-list-item :border="false" title="日期">
						<template v-slot:footer>
							<uni-dateformat :date="header.returnDate" style="font-size: 20px; color: #000000;" format="yyyy年MM月dd日">
							</uni-dateformat>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
			<template v-if="detail && detail.length > 0">

				<view class="" v-for="(item,index) in detail" :key="index">
					<view class="panel">

						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">物料编码：</view>
									<view class="panel_content_row_item_value">{{ item.materialNo }}</view>
								</view>
							</view>
						</view>
						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">名称：</view>
									<view class="panel_content_row_item_value">{{ item.materialName }}</view>
								</view>
							</view>
						</view>
						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">规格：</view>
									<view class="panel_content_row_item_value">{{ item.specification }}</view>
								</view>
							</view>
						</view>
						<view class="panel_content">
							<view class="panel_content_row">
								<!-- 暂时没有材质，用单位代替 -->
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">单位：</view>
									<view class="panel_content_row_item_value">{{ item.basicUnitName }}</view>
								</view>
							</view>
						</view>
						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">实退数量：</view>
									<view class="panel_content_row_item_value">{{ item.infactQty }}</view>
								</view>
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">仓库：</view>
									<view class="panel_content_row_item_value">{{ item.stockName }}</view>
								</view>
							</view>
						</view>
						<view class="panel_content">
							<view class="panel_content_row">

								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">仓位：</view>
									<view class="panel_content_row_item_value">
										{{item.locationnNo}}</view>
								</view>
							</view>
						</view>


					</view>

				</view>

			</template>

		</view>
		<!--  底部按钮  -->
		<view class="footerPanel">
			<view class="footerPanel_body">
				<button @click="auditPurReturn()" class="footerBtn save" :disabled="butClick"><i class="iconfont icon-duihao btn_icon"></i>审核
				</button>

			</view>
		</view>
	</view>
</template>

<script>
	import uniTransition from 'uni_modules/uni-transition/components/uni-transition/uni-transition.vue';

	import {
		getPurReturnDetail,
		auditPurReturn

	} from '@/utils/api.js'

	export default {
		components: {

		},
		data() {
			return {
				billNo: '',
				loading: true,
				header: {},
				detail: [],
				materialList: [],
				butClick: false,
				selectRange: [],
				locationNo: '',
				locationName: ''
			}
		},
		methods: {
			//审核采购退料单
			auditPurReturn() {
				let self = this;
				uni.showModal({
					title: '提示',
					content: '确认审核',
					success(res) {
						if (res.confirm) {
							try {
								auditPurReturn({
									billNo: self.billNo
								}).then(result => {
									if (result.data.status !== 200) {
										return
									}
									uni.showToast({
										title: '审核成功',
										icon: 'none'
									})
									setTimeout(() => {
										uni.navigateBack({
											delta: 1,
											success() {
												uni.$emit('update', {
													msg: '页面刷新'
												});
											}
										})
									}, 1000)
								})
							} catch (e) {
								console.log(e)
							}
						}
					}
				})
			},


			// 获取详情数据
			initData() {
				getPurReturnDetail({
					billNo: this.billNo
				}).then(res => {
					this.header = res.data.data.data
					this.detail = res.data.data.dataList

				})


			}
		},
		watch: {
			userInfo() {
				console.log(this.userInfo())
			}
		},
		onLoad(e) {
			this.billNo = e.billNo
			// 获取详情数据
			this.initData()


		}
	}
</script>

<style lang="scss" scoped>
	@import "../../static/css/common";

	/* 调整列表项左右文字大小 */
	::v-deep .uni-list-item__content-title {
		font-size: 20px !important;
		/* 左侧标题字体大小 */
		padding-left: 5px;
	}

	::v-deep .uni-list-item__extra-text {
		font-size: 20px !important;
		/* 右侧内容字体大小 */
		padding-right: 5px;
		color: #333;
	}

	/* 调整行间距 */
	::v-deep .uni-list-item__container {
		padding: 3px 0 !important;
		/* 减小上下内边距 */
		min-height: 10px !important;
		/* 减小最小高度 */
	}
	.panel {
	  background: #fbffe2;
	  border-radius: 16rpx;
	  // box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
	}
	/* 减小面板内容间距 */
	.panel_content {
		// padding: 0 10px !important; // 移除上下内边距
		margin: 0 !important; // 移除默认外边距
	}

	/* 调整标题样式 */
	.panel_content_row_item_title {
		font-size: 17px !important;
		/* 调大字体 */
		color: #000000 !important;
		/* 纯黑字体 */
		flex-shrink: 0;
		/* 防止压缩 */
	}

	/* 调整标题样式 */
	.panel_content_row_item_value {
		flex: 1;
		font-size: 17px !important;
		/* 数值特别放大 */
		color: #333 !important;
	}

	/* 调整输入框容器 */
	.panel_content_row_item_value_input {
		height: 30px;
		flex: 1;
		/* 占据剩余空间 */
		margin-left: 10px;
		/* 增加左右间距 */
	}

	.panel_content_row_item_value_input input {
		height: 29px !important;
		/* 调高输入框 */
		font-size: 20px !important;
		/* 同步调大输入文字 */
		// padding: 1px 12px !important;
		// border: 1px solid #ddd;     /* 增加边框更清晰 */
		border-radius: 4px;
	}


	/* 底部按钮 - 修改布局 */
	.footerPanel {
		height: 60px;

		.footerPanel_body {
			display: flex;
			justify-content: space-between;
			/* 左右分布按钮 */
			width: 100%;
			padding: 0 10px;
			box-sizing: border-box;

			.footerBtn {
				height: 55px;
				min-width: 115px;
				display: flex;
				line-height: 1;
				font-size: 20px;
				/* 适当增大字体 */
				border-radius: 8px;
				align-items: center;
				justify-content: center;
				box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
				color: #fff;
				border: none;
				// margin: 0 10px;
			}
		}
	}
</style>
